<?php
require_once "weixin_info.php";
require_once "config.php";
$id = $_GET['id'];
$u_id = !empty($id) ? $id : $_SESSION['Member_info'][0]['id'];
if (!empty($u_id)) {
    $sql = $mysql->query("select * from dyspw_member where id=" . $u_id); //视频
    $member_info = $sql->fetch_all(MYSQLI_ASSOC);
} else {
    $member_info = $_SESSION['Member_info'];
}

$foll_sql = $mysql->query("select * from dyspw_follow where fans_id=" . $u_id);
$foll = $foll_sql->fetch_all(MYSQLI_ASSOC);
$fans_sql = $mysql->query("select * from dyspw_follow where u_id=" . $u_id);
$fans = $fans_sql->fetch_all(MYSQLI_ASSOC);
?>
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>关注列表</title>
    <link rel="stylesheet" href="css/core.css">
    <script src="js/jquery-2.2.4.min.js" type="text/javascript"></script>
    <script src="js/jquery.cookie.js" type="text/javascript"></script>
    <script src="js/layer/layer.js" type="text/javascript"></script>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet" />

    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?cb5d49b07e0a753dc8ee27ba2c73495d";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</head>

<body>
    <section>
        <div class="main" style="width: 100%;padding: 45px 14px 0;background: white;">
            <!-- <div class="header-box" style="height:50px;">
            <a href="javascript:history.back(-1);" class="back"><img src="images/back-b.png" /></a>
            <h2><?php echo $member_info[0]['username']; ?></h2>
        </div> -->
            <header id="header" class="mui-bar mui-bar-nav">
                <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
                <h1 class="mui-title"><?php echo $member_info[0]['username']; ?></h1>
            </header>
            <div class="follow-box cl mui-table-view">
                <ul class="follow-nav-box cl">
                    <li class="cur effect" data="foll"><a href="#">关注 <?php echo count($foll); ?></a></li>
                    <li class="effect" data="fans"><a href="#">粉丝 <?php echo count($fans); ?></a></li>
                </ul>
                <div class="follow-list-box foll">
                    <ul class="cl">
                        <?php foreach ($foll as $key => $val) { ?>
                            <li class="cl">
                                <img src="<?php echo $val['u_avatar']; ?>" class="avatar fl" />
                                <!-- <em><img src="images/grzl-wx.png" /><br />联系我</em> -->
                                <i class="follow" id="<?php echo $val['u_name']; ?>">已关注</i>
                                <h2><?php echo $val['u_name']; ?></h2>
                                <!-- <p>让爱情触动心灵 商业合作请......</p> -->
                            </li>
                        <?php } ?>

                    </ul>
                    <h1></h1>
                </div>
                <div class="follow-list-box fans" style="display:none;">
                    <ul class="cl">
                        <?php foreach ($fans as $key => $val) { ?>
                            <li class="cl">
                                <img src="<?php echo $val['fans_avatar']; ?>" class="avatar fl" />
                                <!-- <em><img src="images/grzl-wx.png" /><br />联系我</em> -->
                                <i class="follow" id="<?php echo $val['u_name']; ?>">关注</i>
                                <h2><?php echo $val['fans_name']; ?></h2>
                                <!-- <p>让爱情触动心灵 商业合作请......</p> -->
                            </li>
                        <?php } ?>
                    </ul>
                    <h1></h1>
                </div>
            </div>
        </div>
    </section>

    <script type="text/javascript">
        $(function() {
            $(".effect").click(function() {
                $(".effect").removeClass("cur");
                $(this).addClass("cur");
                var data = $(this).attr('data');
                $(".follow-list-box").hide();
                $("." + data).show();
            })

            // 取消关注 follow
            $(".follow").click(function() {
                const self = this;
                const text = self.innerText;
                if (text === '关注') { // 关注
                    $.ajax({
                        url: '去关注.php',
                        data: {},
                        dataType: 'json',
                        type: 'post',
                        success: function(res) {
                            if (res.status == 'y') {
                                self.innerText = '已关注';
                                return layer.open({
                                    content: res.info,
                                    skin: 'msg',
                                    time: 3
                                });
                            } else {
                                return layer.open({
                                    content: res.info,
                                    skin: 'msg',
                                    time: 3
                                });
                            }
                        }
                    })
                } else {
                    $.ajax({
                        url: '取消关注.php',
                        data: {},
                        dataType: 'json',
                        type: 'post',
                        success: function(res) {
                            if (res.status == 'y') {
                                self.innerText = '关注';
                                return layer.open({
                                    content: res.info,
                                    skin: 'msg',
                                    time: 3
                                });
                            } else {
                                return layer.open({
                                    content: res.info,
                                    skin: 'msg',
                                    time: 3
                                });
                            }
                        }
                    })
                }

            });
        });
    </script>
</body>

</html>